const CracoLessPlugin = require('craco-less');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const path = require('path')
const { GitRevisionPlugin } = require('git-revision-webpack-plugin')

// 以当前文件所处的地址为起点来查找某一个目录的绝对的地址
const pathResolve = pathUrl => path.join(__dirname, pathUrl)

// git插件实例
const gitReversionPlugin = new GitRevisionPlugin({
  versionCommand: 'describe --always --tags --dirty'
})

// craco配置文件中, 暴露出的这个配置对象上的很多配置都会合并到CRA内部的webpack的配置上
module.exports = {
  webpack: {
    alias: {
      '@': pathResolve('src'),
      // '@styles': pathResolve('src/styles'),
    }
  },
  // 这里可以配置各种插件
  plugins: [
    {
      // 自定义的操作
      plugin: {
        // 这里可以直接拿到webpack的配置, 进行修改
        overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {
          // console.log(webpackConfig.plugins);
          // 进行打包地址修改
          if (env === 'production') {
            paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist')
            webpackConfig.output.path = path.join(path.dirname(webpackConfig.output.path), 'dist')
          }
          // 全局环境变量
          const definePluginIndex = env === 'development' ? 3 : 4
          const definePlugin = webpackConfig.plugins[definePluginIndex]
          const definitions = definePlugin.definitions
          // 变量只能放字符串
          definitions['process.git'] = {
            commithash: JSON.stringify(gitReversionPlugin.commithash()),
            version: JSON.stringify(gitReversionPlugin.version()),
            branch: JSON.stringify(gitReversionPlugin.branch()),
          }
          definitions['process.classes'] = {
            name: JSON.stringify('BK2124')
          }
          return webpackConfig;
        },
      },
      options: {}
    },
    {
      plugin: CracoLessPlugin,
      // 描述了这个插件使用上的选项配置
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { 
              '@primary-color': '#1DA57A',// 全局主色
            },
            javascriptEnabled: true,
          },
        },
      },
    },
    {
      plugin: AntdDayjsWebpackPlugin
    }
  ],
};